<script type="text/javascript" src="/public/js/kendo/src/js/kendo.web.js"></script>
<script type="text/javascript" src="/public/js/kendo/src/js/cultures/kendo.culture.vi-VN.js"></script>
<link rel="stylesheet" type="text/css" href="/public/js/kendo/src/styles/kendo.common.css">
<link rel="stylesheet" type="text/css" href="/public/js/kendo/src/styles/kendo.default.css">

<?php
$domainItem = $this->domainItem;


?>
<style type="text/css">

</style>
<hr />
<ol class="breadcrumb bc-3">
    <li>
        <a href="/<?php echo $domainItem->domain ?>/admin"><i class="entypo-home"></i>Home</a>
    </li>
    <li class="active">
        <strong>Tin bài</strong>
    </li>

</ol>
<div class="row">
    <div class="col-sm-6">
        <h3>Danh sách tin bài</h3>
    </div>
    <div class="col-sm-3" style="padding: 15px 0px 0px 15px">
        <a class="btn btn-blue btn-icon btn-sm" type="button" href="<?php echo '/'.$domainItem->domain.'/tin-bai/them-moi' ?>">
            Thêm mới
            <i class="entypo-plus"></i>
        </a>
    </div>

</div>
<div class="row" id="div_article_show_criteria" style="margin: 5px 0px;padding: 5px;  background-color: #d8d8d8">
    <a href="javascript:showAdvancedSearch()" id='lnkShowSearch'><i class="entypo-plus"></i>&nbsp;Tìm kiếm nâng cao </a>
    <a href="javascript:hideAdvancedSearch()" id='lnkHideSearch' style="display: none"><i class="entypo-minus"></i>&nbsp;Ẩn tìm kiếm nâng cao </a>
</div>

<div class="row hide" id="div_article_criteria" style="margin: 5px 0px;padding: 5px;  background-color: #d8d8d8">
    <div class="form-group">
        <label class="col-sm-3 control-label" >Nhóm chính</label>
        <div class="col-sm-5">
            <select id="cboMainCategory" class="form-control">
                <option value="ALL">Tất cả</option>
                <?php foreach ($this->allMainArticleGroup as $aCategory) {
                    echo '<option value="'.$aCategory->id.'">'.$aCategory->name.'</option>';
                }
                ?>
            </select>
        </div>
    </div>
    <br>
    <div class="form-group">
        <label class="col-sm-3 control-label" >Nhóm phụ</label>
        <div class="col-sm-5">
            <select id="cboSubCategory" class="form-control">
                <option value="ALL">Tất cả</option>
                <?php foreach ($this->allSubArticleGroup as $aCategory) {
                    echo '<option value="'.$aCategory->id.'">'.$aCategory->name.'</option>';
                }
                ?>
            </select>
        </div>
    </div>
    <br>
    <div class="form-group">
        <label class="col-sm-3 control-label" for="txtTitle">Tiêu đề bài viết</label>
        <div class="col-sm-5">
            <input id="txtTitle" class="form-control" type="text" >
        </div>
    </div>
    <br>
    <div style="margin: 10px">
        <a href="javascript:doSearch()" class="btn btn-blue btn-icon btn-sm" type="button">
            Tìm kiếm
            <i class="entypo-search"></i>
        </a>

    </div>
</div>


<div class="row" id="div_article_result">
    <div id="article_grid" style="margin: 0px 15px"></div>
</div>

<script>
    $(document).ready(function(){
        $("#div_article_criteria").keyup( function(event) {
            if ( event.which == 13 ) {
                event.preventDefault();
                doSearch();
            }
        });

        dataSource = new kendo.data.DataSource({
            type: "jsonp",
            transport: {

                read: function(options) {
                    options.data.name=$('#txtHeader').val();
                    options.data.category=$('#cboMainCategory').val();
                    options.data.subCategory=$('#cboSubCategory').val();

                    $.ajax( {
                        url: "<?php echo '/'.$domainItem->domain.'/admin/article/list'  ?>",
                        data: options.data, // the "data" field contains paging, sorting, filtering and grouping data
                        success: function(result) {
                            options.success(result);
                        },
                        dataType: "json",
                        type: "POST"

                    });
                },

                destroy: function(options) {
                     opts = {
                        "closeButton": true,
                        "debug": false,
                        "positionClass": "toast-bottom-right",
                        "onclick": null,
                        "showDuration": "300",
                        "hideDuration": "1000",
                        "timeOut": "5000",
                        "extendedTimeOut": "1000",
                        "showEasing": "swing",
                        "hideEasing": "linear",
                        "showMethod": "fadeIn",
                        "hideMethod": "fadeOut"
                    };
                    $.ajax( {
                        url: "<?php echo '/'.$domainItem->domain.'/admin/article/delete' ?>?id="+options.data.id,
                        data: options.data,
                        success: function(result) {
                            if(result.success){
                                options.success(options.data.models);
                                toastr.info("Xóa thành công", "", opts);
                            }else{

                                grid = $("#article_grid").data("kendoGrid");
                                // cancel changes
                                grid.cancelChanges();
                                toastr.error("Lỗi: "+result.msg, "", opts);
                            }
                        },
                        dataType: "json",
                        type: "POST"
                    });
                }
            },
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: {editable: false,  type: "number" },
                        header: { type: "string" },
                        user_name: { type: "string" },
                        order_number: { type: "number" },
                        active: { type: "number" },
                        created_date: { type: "date" }
                    }
                },
                data: "rows",
                total: "total"
            },
//                    batch: true,
            pageSize: 30,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        });

        $("#article_grid").kendoGrid({
            dataSource: dataSource,
            navigatable: true,
            pageable: true,
            selectable:'row',
            columnMenu: false,
            sortable: true,
            resizable:true,
//        toolbar:kendo.template($("#template").html()),

            columns: [
                { field: "header", title: "Tiêu đề", width: 100},
                { field: "user_name", title: "Người tạo", width: 60 },
                { field: "created_date", title: "Ngày tạo", width: 50,attributes:{style:"text-align:right;"},
                    template: '# if(created_date != null){#' +
                        '#= kendo.toString(created_date,"dd/MM/yyyy") #' +
                        '#}#'},
                { field: "active", title: "Active", width: 40,attributes:{style:"text-align:center;"},
                    template: "<input onclick='doActive( \"#= id#\")'   type='checkbox' data-bind='checked: 1' #= active==1 ? checked='checked' : '' #/>"},
                { field: "order_number", title: "Số thứ tự", width: 30, attributes:{style:"text-align:center;"},sortable: false},
                { field: "sumarize", title: "&nbsp;", width: 40,attributes:{style:"text-align:center;"},sortable: false,
                    template:'<a style="font-size: 14px" onclick="doEdit(\'#= id#\')"><i class="entypo-pencil"></i></a>'+
                        '<a style="font-size: 14px" onclick="doDelete(this, \'#= id#\')"><i class="entypo-trash"></i></a>'
                    + '# if(upable){#'+
                      ' <a href="javascript:doUp(\'#= id#\')"><i class="entypo-up"></i></a>'+
                      '#}#'
                    + '# if(downable){#'+
                    ' <a href="javascript:doDown(\'#= id#\')"><i class="entypo-down"></i></a>'+
                    '#}#'

                }
            ],
            editable: "inline"
        });

        function doSearch(){
            grid = $("#article_grid").data("kendoGrid");
            grid.dataSource.page(1);
            grid.dataSource.read();
        }


    })

    function showAdvancedSearch(){
        $('#div_article_criteria').removeClass('hide');
        $('#lnkHideSearch').show();
        $('#lnkShowSearch').hide();
    }

    function hideAdvancedSearch(){
        $('#div_article_criteria').addClass('hide');
        $('#lnkHideSearch').hide();
        $('#lnkShowSearch').show();
    }

    var opts = {
        "closeButton": true,
        "debug": false,
        "positionClass": "toast-bottom-right",
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "10000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };
    function doActive(articleId){



        $.post('<?php echo '/'.$domainItem->domain.'/admin/article/active' ?>',{id:articleId}
            ,function(result){
                if (result.success){
                    toastr.info("Active thành công", "", opts);
                }else{
                    toastr.error("Lỗi: "+result.msg, "", opts);
                }

            },'json');

    }

    function doUp(articleId){

        $.post('<?php echo '/'.$domainItem->domain.'/admin/article/do-up' ?>',{id:articleId}
            ,function(result){
                if (result.success){
                    toastr.info("Tăng số thứ tự thành công", "", opts);
                    grid = $("#article_grid").data("kendoGrid");
                    grid.dataSource.read();
                }else{
                    toastr.error("Lỗi: "+result.msg, "", opts);
                }

            },'json');

    }

    function doDown(articleId){

        $.post('<?php echo '/'.$domainItem->domain.'/admin/article/do-down' ?>',{id:articleId}
            ,function(result){
                if (result.success){
                    toastr.info("Giảm số thứ tự thành công", "", opts);
                    grid = $("#article_grid").data("kendoGrid");
                    grid.dataSource.read();
                }else{
                    toastr.error("Lỗi: "+result.msg, "", opts);
                }

            },'json');
    }


    function doDelete(me, articleId){
        bootbox.confirm("Bạn chắc chắn muốn xóa bài viết này?", function(result) {
            if(result){
                grid = $("#article_grid").data("kendoGrid");
                tr = $(me).closest("tr"); //get the row for deletion
                dataItem = grid.dataItem(tr);
                grid.dataSource.remove(dataItem)  //prepare a "destroy" request
                grid.dataSource.sync()
            }

        });
    }

    function doEdit( articleId){
        window.location =  '<?php echo '/'.$domainItem->domain.'/tin-bai/sua?id=' ?>'+articleId;
    }

</script>
